<!--
 * @Description: 攻略详情
 -->
<template>
  <div class="about" id="about" name="about">
    <div class="about-header">
      <div class="about-title">
        <!--        <i class="el-icon-tickets" style="color: #000000;"></i>-->
        攻略 > {{ glDetail.title }}
      </div>
    </div>
    <div class="about-content">
      <CatMarkdown :glDetail="glDetail.content"></CatMarkdown>
    </div>
  </div>
</template>
<script>
import CatMarkdown from "@/components/CatMarkdown";

export default {
  components: {
    CatMarkdown
  },
  data() {
    return {
      glPid: "", // 攻略pid
      glDetail: "", // 攻略详细信息
    };
  },
  // 通过路由获取攻略id
  activated() {
    if (this.$route.query.glPid != undefined) {
      this.glPid = this.$route.query.glPid;
      console.log(
        "判断activated",
        "this.productID:",
        this.glPid,
        "this.$route.query.productID:",
        this.$route.query.glPid
      );
    }
  },
  watch: {
    // 监听景点id的变化，请求后端获取景点数据
    glPid: function (val) {
      console.log(
        "监听景点id的变化，请求后端获取景点数据 watch productID",
        val
      );
      this.getGlDetails(val);
    },
  },
  methods: {
    getGlDetails(pid) {
      this.$axios
        // .post("/cat/goodinfo/info/" + pid)
        .post("/cat/glInfo/info/" + pid)
        .then((res) => {
          this.glDetail = res.data.glInfo;
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
  }
};
</script>
<style scoped>
.about {
  background-color: #f5f5f5;
}

.about .about-header {
  height: 64px;
  background-color: #fff;
  border-bottom: 2px solid #000000;
}

.about .about-header .about-title {
  width: 1225px;
  margin: 0 auto;
  height: 64px;
  line-height: 64px;
  font-size: 28px;
}

.about .content {
  padding: 20px 0;
  width: 1225px;
  margin: 0 auto;
}

.about .content .goods-list {
  margin-left: -13.7px;
  overflow: hidden;
}

.about .about-content {
  width: 1225px;
  margin: 0 auto;
  background-color: #fff;
}
</style>
